<template>
  <div>
    <!-- <header>
      <div class="headerDiv">
        <span class="head_icon"></span>
        <h1 class="title">湖北省安全生产网络培训系统</h1>
      </div>
    </header> -->    
    <vue-better-scroll class="wrapper"
                       ref="scrollqq"
                       :scrollbar="scrollbarObj"
                       :pullDownRefresh="pullDownRefreshObj"
                       :pullUpLoad="pullUpLoadObj"
                       :startY='parseInt(startY)'
                       @pulling-down="onPullingDown"
                       @pulling-up="onPullingUp">
      <app-header></app-header>
      <div class="allTrain">
        <div class="main">
          <h1 class="column">
            <span class="column_icon"></span>考试记录
          </h1>
          <div style="padding:0 15px;padding-top:25px;">
            <x-table :cell-bordered="false">
              <thead>
                <tr>
                  <th width="20%">考试类别</th>
                  <th width="10%">成绩</th>
                  <th width="20%">状态</th>
                  <th width="30%">提交时间</th>
                  <th width="20%">操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="item in list" :key="item.id">
                  <td>{{item.examType==1?'正式考试':'模拟考试'}}</td>
                  <td>{{item.examScore}}</td>
                  <td>{{item.status==2?'不合格':'合格'}}</td>
                  <td>{{item.createTime}}</td>
                  <td @click="$router.push({path:'/anwserRecord',query:{id:item.id}})">
                    <span class="operation">答题记录</span>
                  </td>
                </tr>
              </tbody>
            </x-table>
          </div>
        </div>
      </div>
    </vue-better-scroll>
  </div>
</template>

<script>
  import { XTable } from "vux";
  import { getStudentExamRecordPageList } from '@/api/trainClass';
  import VueBetterScroll from "vue2-better-scroll"
  import Header from "../../components/header";
  export default {
    components: {
      "app-header": Header,
      XTable,
      VueBetterScroll
    },
    data() {
      return {
        trainClassId: '',
        examListQuery: {
          skipCount: 0,
          maxResultCount: 10,
          pi: 1,
          ps: 10,
          trainClassId: '',
          examType: ''
        },
        list: [],
        scrollbarObj: { fade: true },
        pullDownRefreshObj: false,
        pullUpLoadObj: {
          threshold: 0,
          txt: {
            more: "加载更多",
            noMore: "没有更多数据了"
          }
        },
        startY: 0,
        scrollToX: 0,
        scrollToY: 0,
        scrollToTime: 700
      };
    },
    created() {
      this.trainClassId = this.$route.query.id;
      this.examListQuery.trainClassId = this.$route.query.id;
      this.search();
    },
    methods: {
      search() {
        let that = this;
        that.examListQuery.pi = 1;
        that.examListQuery.skipCount = (that.examListQuery.pi - 1) * that.examListQuery.ps;
        this.$vux.loading.show({
          text: "Loading"
        });
        getStudentExamRecordPageList(this.examListQuery).then(response => {
          this.list = response.items;
          if(response.totalCount==response.items.length){
            this.$refs['scrollqq'].forceUpdate(false);
          }else{
            this.$refs['scrollqq'].forceUpdate(true);
          }          
          this.$vux.loading.hide();
        })
      },
      fetchData() {
        this.$vux.loading.show({
          text: "Loading"
        });
        getStudentExamRecordPageList(this.examListQuery).then(response => {
          this.list = this.list.concat(response.items);
          let totalAllCount = response.totalCount;
          let resultCount = this.list.length;
          if (parseInt(resultCount) < parseInt(totalAllCount)) {
            this.$refs['scrollqq'].forceUpdate(true);
          } else {
            this.$refs['scrollqq'].forceUpdate(false);
          }
          this.$vux.loading.hide();
        })
      },
      onPullingUp() {
        let limitcount = this.list.length;
        this.examListQuery.skipCount = limitcount;
        this.fetchData();
      },
      onPullingDown() {
        this.search();
      },
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  header {
    height: 64px;
    background-color: #2269ff;
  }

  .headerDiv {
    padding-top: 28px;
  }

  .title {
    font-size: 18px;
    color: #ffffff;
    text-align: center;
  }

  .head_icon {
    display: inline-block;
    background: url("../../assets/images/back@3x.png") no-repeat;
    background-size: 100% 100%;
    width: 13px;
    height: 22px;
    position: absolute;
    left: 15px;
    top: 29px;
  }

  .main {
    padding: 18px 0px 20px 0px;
    text-align: left;
    padding-top:90px;
  }

  .column_icon {
    display: inline-block;
    width: 4px;
    height: 18px;
    background-color: #2269ff;
    border-radius: 2px;
    position: relative;
    left: -12px;
    top: 2px;
  }

  .column {
    font-size: 17px;
    margin-left: 27px;
    margin-bottom: 5px
  }

  .operation {
    display: inline-block;
    width: 65px;
    height: 25px;
    border-radius: 5px;
    background-color: #2269ff;
    vertical-align: middle;
    line-height: 25px;
    color: #ffffff;
  }

  .vux-table {
    line-height: normal;
    border-collapse: collapse;
  }

    .vux-table th {
      border-top: 0;
      font-weight: bold;
      font-size: 15px;
    }

    .vux-table:after {
      border-top: none;
    }

    .vux-table td {
      font-size: 14px
    }

    .vux-table td, .vux-table th {
      height: 50px;
      padding: 0 auto
    }

  thead {
    border: 0
  }

  .yellow {
    color: #fe0000
  }
</style>
